<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <%@ include file="/include/service-base-header.jsp" %>
    <title>banner</title>
    <style>
        .table tbody tr td, .table th {
            padding: 5px;
        }

        .btn {
            padding: 8px 15px;
        }
    </style>
</head>
<body onload="findAllAd()">
<div class="wrapper">
    <jsp:include page="/include/left_menu.jsp">
        <jsp:param name="index" value="5"/>
    </jsp:include>
    <div class="main-panel">
        <nav class="navbar navbar-expand-lg "
             style="-webkit-box-shadow:0 0 5px rgba(40, 173, 243, 0.0);box-shadow: 0 0 5px rgba(40, 173, 243, 0.0);">
            <div class="container-fluid">
                <div class="navbar-wrapper b-navbar-wapper">
                    <a class="b-navbar-title" href="${pageContext.request.contextPath}/s/setting.do">热门比赛</a>
                    <a class="b-navbar-title-active" href="#">轮播图</a>
                    <a class="b-navbar-title" href="${pageContext.request.contextPath}/s/messageInfo.do">系统公告</a>
                </div>
                <div class="nav-collapse justify-content-end">
                    <div>
                        <div class="toolbar_left">
                            <div class="form-inline" style="height: 1rem">

                                <div class="form-group form-group-1">
                                    <a class="btn btn-info navbar-wrapper"
                                       href="${pageContext.request.contextPath}/s/addBanner.do" role="button"
                                       style="color: white">添加轮播图</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-plain">
                        <div class="card-header card-header-primary">
                            <div class="card-title">轮播图</div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table" id="table">
                                    <thead>
                                    <tr>
                                        <th class="text-primary">
                                            #
                                        </th>
                                        <th class="text-primary">
                                            标题
                                        </th>
                                        <th class="text-primary">
                                            图片链接
                                        </th>
                                        <th class="text-primary">
                                            关联比赛
                                        </th>
                                        <th class="text-primary">
                                            比赛开始时间
                                        </th>
                                        <th class="text-primary">
                                            展示时间
                                        </th>
                                        <th class="text-primary">
                                            操作
                                        </th>
                                    </tr>
                                    </thead>
                                    <tbody id="tbody">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <nav aria-label="page">
                        <ul class="pagination justify-content-center" id="p1">
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script>
    var page_count = 10;
    function findAllAd() {
        $.ajax({
            url: baseUrl.base + baseUrl.adInfo + "/findAllAd",
            type: 'get',
            data: {},
            success: function (data) {
                if (data.code == "0") {
                    var res = data.results;
                    cutPagination(1, res);
                    $("#p1").pagination({
                        totalData: res.length,
                        showData: page_count,
                        callback: function (idx) {
                            cutPagination(idx, res);
                        }
                    });
                } else {
                    var res = data.msg;
                    showNotification('bottom', 'right', res);
                }
            }
        });
    };
    findAllAd();

    /**
     * 分页
     * @param page 从1开始
     */
    function cutPagination(page, res) {
        var start = (page - 1) * page_count;
        var end = start + page_count;
        if (end > res.length) {
            end = res.length;
        }
        $("#table tbody").html("");
        for (var i = start; i < end; i++) {
            var tr = document.createElement("tr");

            var td = document.createElement("td");
            var tdContent = document.createTextNode(i + 1);
            td.appendChild(tdContent);
            tr.appendChild(td);

            td = document.createElement("td");
            var title = document.createTextNode((res[i].title));
            td.appendChild(title);
            tr.appendChild(td);

            td = document.createElement("td");
            var a = document.createElement("a");
            var adImage = document.createTextNode("查看图片");
            a.setAttribute("href", res[i].adImage);
            a.appendChild(adImage);
            td.appendChild(a);
            tr.appendChild(td);

            td = document.createElement("td");
            if (null == res[i].eventHomeName) {
                tdContent = document.createTextNode("");
            } else {
                tdContent = document.createTextNode(res[i].eventHomeName + ' VS ' + res[i].eventAwayName);
            }

            td.appendChild(tdContent);
            tr.appendChild(td);


            td = document.createElement("td");
            tdContent = document.createTextNode(timestampToTime(res[i].eventTime));
            td.appendChild(tdContent);
            tr.appendChild(td);

            td = document.createElement("td");
            tdContent = document.createTextNode(timestampToTime(res[i].staTime) + " ~ " + timestampToTime(res[i].endTime));
            td.appendChild(tdContent);
            tr.appendChild(td);

            td = document.createElement("td");
            var btn2 = document.createElement("button");
            btn2.setAttribute("type", "button");
            var btn2 = document.createElement("button");
            btn2.setAttribute("type", "button");
            btn2.setAttribute("class", "btn btn-success btn-sm");
            btn2.setAttribute("adId", res[i].adId);
            btn2.setAttribute("adStatus", res[i].adStatus);
            btn2.onclick = function (ev) {
                updateAd(this);
            }
            if (res[i].adStatus == 1) {
                tdContent = document.createTextNode("下架");
            } else {
                tdContent = document.createTextNode("上架");
            }
            btn2.appendChild(tdContent);
            td.appendChild(btn2);
            tr.appendChild(td);

            document.getElementById("tbody").append(tr);
            document.getElementById("tbody").innerHTML;
        }
    }

    function updateAd(colom) {
        var id = colom.getAttribute("adId");
        var datas = {};
        if (colom.getAttribute("adStatus") == 1) {
            datas.adStatus = 0;
        } else {
            datas.adStatus = 1;
        }
        datas.adId = id;
        $.ajax({
            url: baseUrl.base + baseUrl.adInfo + '/updateAd',
            type: 'get',
            data: datas,
            success: function (data) {
                if (data.code == "0") {
                    if (colom.getAttribute("adStatus") == 1) {
                        showNotification('bottom', 'right', '下架成功');
                        colom.setAttribute("adStatus", 0);
                        colom.innerText = "上架";
                    } else {
                        showNotification('bottom', 'right', '上架成功');
                        colom.setAttribute("adStatus", 1);
                        colom.innerText = "下架";
                    }
                    //                    findAllAd();
                } else {
                    showNotification('bottom', 'right', data.msg);
                }
            }
        })
    };

    window.addEventListener("popstate", function (e) {
        alert("dddd");
        findAllAd();
    });
</script>
</html>